<template>
  <div class="help-container">
    <div class="header">
      <h1>帮助文档</h1>
    </div>
    
    <div class="content">
      <div class="help-sections">
        <div class="help-section">
          <h3>快速开始</h3>
          <p>欢迎使用我们的技术规范文档系统。这里提供了完整的API开发指南和最佳实践。</p>
        </div>
        
        <div class="help-section">
          <h3>常见问题</h3>
          <div class="faq-item">
            <h4>Q: 如何查看API文档？</h4>
            <p>A: 点击左侧导航栏中的"API接口文档"即可查看详细的接口说明。</p>
          </div>
          
          <div class="faq-item">
            <h4>Q: 如何查看历史版本？</h4>
            <p>A: 在"历史版本"页面可以查看所有版本的更新记录和变更内容。</p>
          </div>
        </div>
        
        <div class="help-section">
          <h3>联系支持</h3>
          <p>如果您遇到任何问题，请联系我们的技术支持团队。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 帮助页面逻辑
</script>

<style scoped>
.help-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.help-sections {
  max-width: 800px;
}

.help-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.help-section h3 {
  color: #262626;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.help-section p {
  color: #595959;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
}

.faq-item {
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}

.faq-item h4 {
  color: #262626;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.faq-item p {
  color: #595959;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
</style>